import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export type ThemeMode = 'light' | 'dark' | 'auto'
export type LayoutMode = 'vertical' | 'horizontal' | 'mix'

export const useSettingsStore = defineStore('settings', () => {
  // 主题设置
  const theme = ref<ThemeMode>('light')
  const primaryColor = ref('#007AFF') // Apple蓝
  const isDark = ref(false)
  
  // 布局设置
  const layoutMode = ref<LayoutMode>('vertical')
  const sidebarWidth = ref(240)
  const headerHeight = ref(60)
  const showBreadcrumb = ref(true)
  const showTabs = ref(true)
  const fixedHeader = ref(true)
  
  // 页面设置
  const pageTransition = ref(true)
  const keepAlive = ref(true)
  const showFooter = ref(false)
  
  // 表格设置
  const tableSize = ref<'large' | 'default' | 'small'>('default')
  const tableStripe = ref(true)
  const tableBorder = ref(true)
  
  // 表单设置
  const formSize = ref<'large' | 'default' | 'small'>('default')
  const formLabelWidth = ref(120)
  
  // Apple设计系统颜色
  const appleColors = {
    primary: '#007AFF',    // 系统蓝
    success: '#34C759',    // 系统绿
    warning: '#FF9500',    // 系统橙
    danger: '#FF3B30',     // 系统红
    info: '#5856D6',       // 系统紫
    gray: '#8E8E93'        // 系统灰
  }
  
  // 响应式断点设置
  const responsiveSettings = ref({
    enableMobileLayout: true,
    mobileBreakpoint: 768,
    tabletBreakpoint: 1024,
    autoCollapseSidebar: true
  })
  
  // 计算属性
  const currentTheme = computed(() => {
    if (theme.value === 'auto') {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    }
    return theme.value
  })
  
  // Actions
  const setTheme = (newTheme: ThemeMode) => {
    theme.value = newTheme
    updateCSSVariables()
  }
  
  const setPrimaryColor = (color: string) => {
    primaryColor.value = color
    updateCSSVariables()
  }
  
  const setLayoutMode = (mode: LayoutMode) => {
    layoutMode.value = mode
  }
  
  const setSidebarWidth = (width: number) => {
    sidebarWidth.value = width
  }
  
  const updateTableSettings = (settings: {
    size?: 'large' | 'default' | 'small'
    stripe?: boolean
    border?: boolean
  }) => {
    if (settings.size) tableSize.value = settings.size
    if (settings.stripe !== undefined) tableStripe.value = settings.stripe
    if (settings.border !== undefined) tableBorder.value = settings.border
  }
  
  const updateFormSettings = (settings: {
    size?: 'large' | 'default' | 'small'
    labelWidth?: number
  }) => {
    if (settings.size) formSize.value = settings.size
    if (settings.labelWidth) formLabelWidth.value = settings.labelWidth
  }
  
  const updateResponsiveSettings = (settings: Partial<typeof responsiveSettings.value>) => {
    Object.assign(responsiveSettings.value, settings)
  }
  
  // 更新CSS变量
  const updateCSSVariables = () => {
    const root = document.documentElement
    
    // 主色调
    root.style.setProperty('--el-color-primary', primaryColor.value)
    
    // Apple设计系统颜色
    Object.entries(appleColors).forEach(([key, value]) => {
      root.style.setProperty(`--apple-color-${key}`, value)
    })
    
    // 主题模式
    const theme = currentTheme.value
    root.setAttribute('data-theme', theme)
    
    if (theme === 'dark') {
      root.style.setProperty('--el-bg-color', '#1c1c1e')
      root.style.setProperty('--el-bg-color-page', '#000000')
      root.style.setProperty('--el-text-color-primary', '#ffffff')
    } else {
      root.style.setProperty('--el-bg-color', '#ffffff')
      root.style.setProperty('--el-bg-color-page', '#f5f5f7')
      root.style.setProperty('--el-text-color-primary', '#1d1d1f')
    }
  }
  
  // 重置设置
  const resetSettings = () => {
    theme.value = 'light'
    primaryColor.value = '#007AFF'
    layoutMode.value = 'vertical'
    sidebarWidth.value = 240
    tableSize.value = 'default'
    formSize.value = 'default'
    updateCSSVariables()
  }
  
  // 导出设置
  const exportSettings = () => {
    return {
      theme: theme.value,
      primaryColor: primaryColor.value,
      layoutMode: layoutMode.value,
      sidebarWidth: sidebarWidth.value,
      tableSize: tableSize.value,
      tableStripe: tableStripe.value,
      tableBorder: tableBorder.value,
      formSize: formSize.value,
      formLabelWidth: formLabelWidth.value,
      responsiveSettings: responsiveSettings.value
    }
  }
  
  // 导入设置
  const importSettings = (settings: any) => {
    Object.keys(settings).forEach(key => {
      if (key in this) {
        (this as any)[key] = settings[key]
      }
    })
    updateCSSVariables()
  }
  
  return {
    // State
    theme,
    primaryColor,
    isDark,
    layoutMode,
    sidebarWidth,
    headerHeight,
    showBreadcrumb,
    showTabs,
    fixedHeader,
    pageTransition,
    keepAlive,
    showFooter,
    tableSize,
    tableStripe,
    tableBorder,
    formSize,
    formLabelWidth,
    appleColors,
    responsiveSettings,
    
    // Getters
    currentTheme,
    
    // Actions
    setTheme,
    setPrimaryColor,
    setLayoutMode,
    setSidebarWidth,
    updateTableSettings,
    updateFormSettings,
    updateResponsiveSettings,
    updateCSSVariables,
    resetSettings,
    exportSettings,
    importSettings
  }
})